import {
  setWidgetConfigValue,
  setOptionsTitle,
  setOptionsTooltip,
  setOptionsLegend,
} from "../comm.js";
import * as echarts from "echarts";
let scale = [];
let max;
let min;
export const widgetScaleHorizontal = {
  yAxis: [
    {
      show: false,
      min: -10,
      max: 10,
      data: [],
    },
    {
      show: false,
      min: -10,
      max: 10,
      data: [],
    },
    {
      show: false,
      min: -10,
      max: 10,
      data: [],
    },
    {
      // 刻度位置
      show: false,
      min: -3,
      max: 10,
      splitLine: {
        lineStyle: {
          color: "rgba(56, 128, 138,1)",
        },
      },
    },
  ],
  xAxis: [
    {
      type: "value",
      show: false,
      min: 0,
      max: max,
      data: [],
    },
    {
      type: "value",
      show: false,
      min: 0,
      max: max,
      data: [],
    },
    {
      type: "value",
      show: false,
      min: 0,
      max: max,
      data: [],
    },
    {
      show: false,
      data: [],
      min: 0,
      max: max,
      axisLine: {
        show: false,
      },
    },
    {
      show: false,
      min: 0,
      max: max,
    },
  ],
  series: [
    {
      name: "值",
      type: "bar",
      yAxisIndex: 0,
      barWidth: 35,
      itemStyle: {
        normal: {
          color: "#0C2F6F",
          barBorderRadius: 50,
        },
      },
      z: 2,
      data: [
        {
          label: {
            normal: {
              show: true,
              position: "bottom",
              backgroundColor: {},
              width: 10,
              height: 50,
              rich: {
                back: {
                  align: "center",
                  lineHeight: 50,
                  fontSize: 16,
                  fontFamily: "digifacewide",
                },
              },
            },
          },
        },
      ],
    },
    {
      name: "白框",
      type: "bar",
      yAxisIndex: 1,
      barGap: "-100%",
      data: [max - 1],
      barWidth: 35,
      itemStyle: {
        normal: {
          color: "#0C2F6F",
          barBorderRadius: 50,
        },
      },
      z: 1,
    },
    {
      name: "外框",
      type: "bar",
      yAxisIndex: 2,
      barGap: "-100%",
      data: [max],
      barWidth: 45,
      itemStyle: {
        normal: {
          color: "rgba(56, 128, 138,1)",
          barBorderRadius: 50,
        },
      },
      z: 0,
    },
    {
      name: "刻度",
      type: "bar",
      yAxisIndex: 3,
      xAxisIndex: 3,
      label: {
        normal: {
          show: true,
          position: "top",
          distance: 10,
          color: "rgba(56, 128, 138,1)",
          fontSize: 16,
          fontWeight: "normal",
          formatter: function(params) {
            if (params.dataIndex % 10 === 0) {
              return params.dataIndex;
            } else if (params.dataIndex == max) {
              return params.dataIndex;
            } else {
              return "";
            }
          },
        },
      },
      barGap: "-40%",
      data: scale,
      barWidth: 2,
      itemStyle: {
        normal: {
          color: "rgba(56, 128, 138,1)",
        },
      },
      z: 0,
    },
  ],
};
export const widgetScaleHorizontalAnalysisfun = {
  optionsSetup: {},
  options: {},
  optionsStyle: {},
  val: [],
  setOptions(options, optionsSetup, cotrl, val) {
    this.val = [];
    if (val != null && typeof val == "string" && val != "") {
      this.val = JSON.parse(val);
    } else if (typeof val == "object") {
      this.val = val;
    }
    this.optionsStyle.width = cotrl.w;
    this.optionsStyle.height = cotrl.h;
    this.optionsSetup = optionsSetup;
    this.options = options;
    this.options.title = setOptionsTitle(this.optionsSetup);
    this.options.tooltip = setOptionsTooltip(this.optionsSetup);
    this.options.legend = setOptionsLegend(this.optionsSetup);
    // this.setOptionsTitle();
    this.setOptionsMaxScale();
    this.setOptionsXAxis();
    this.setOptionsScale();
    this.setOptionsOutBar();
    this.setOptionsMargin();
    this.setOptionsInBar();
    this.staticDataFn();
    return this.options;
  },

  setOptionsColor(inputValue, inputMax) {
    const optionsSetup = this.optionsSetup;
    let gradient = [];
    if (inputValue > inputMax * 0.7) {
      gradient.push(
        {
          offset: 0,
          color: optionsSetup.bar0Color,
        },
        {
          offset: 0.3,
          color: optionsSetup.bar30Color,
        },
        {
          offset: 0.7,
          color: optionsSetup.bar70Color,
        },
        {
          offset: 1,
          color: optionsSetup.bar100Color,
        }
      );
    } else if (inputValue > inputMax * 0.3) {
      gradient.push(
        {
          offset: 0,
          color: optionsSetup.bar0Color,
        },
        {
          offset: 0.5,
          color: optionsSetup.bar30Color,
        },
        {
          offset: 1,
          color: optionsSetup.bar70Color,
        }
      );
    } else {
      gradient.push(
        {
          offset: 0,
          color: optionsSetup.bar0Color,
        },
        {
          offset: 1,
          color: optionsSetup.bar30Color,
        }
      );
    }
    return gradient;
  },
  setShowValue(inputValue, inputMax) {
    let showValue = inputValue;
    if (inputValue > inputMax) {
      showValue = inputMax;
    } else {
      if (inputValue < 0) {
        showValue = 0;
      } else {
        showValue = inputValue;
      }
    }
    return showValue;
  },
  // 静态数据
  staticDataFn() {
    let val = this.val;
    const optionsSetup = this.optionsSetup;
    const num = val[0]["num"];
    // 渐变色
    const gradient = this.setOptionsColor(num, optionsSetup.maxScale);
    // 数值设定
    const series = this.options.series[0];
    const data = {
      value: this.setShowValue(num, optionsSetup.maxScale),
      label: {
        normal: {
          show: optionsSetup.isShow,
          position: "right",
          distance: optionsSetup.fontDistance,
          width: 10,
          height: 50,
          formatter: "{back| " + num + " }",
          rich: {
            back: {
              align: "center",
              lineHeight: 50,
              fontSize: optionsSetup.fontSize,
              fontWeight: optionsSetup.fontWeight,
              color: gradient[gradient.length - 1].color,
            },
          },
        },
      },
    };
    series.barWidth = optionsSetup.inBarWidth;
    series.itemStyle = {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, gradient),
        barBorderRadius: optionsSetup.inBarRadius,
      },
    };
    series.data[0] = data;
  },
  // 最大刻度设置
  setOptionsMaxScale() {
    const optionsSetup = this.optionsSetup;
    max = optionsSetup.maxScale;
    scale = this.setScale(max);
  },
  setScale(max) {
    let scale = [];
    for (let i = 0; i <= max; i++) {
      if (i <= 0 || i >= max) {
        scale.push("-2");
      } else {
        if ((i - 10) % 20 === 0) {
          scale.push("-2");
        } else if ((i - 10) % 4 === 0) {
          scale.push("-1");
        } else {
          scale.push("");
        }
      }
    }
    return scale;
  },
  setOptionsXAxis() {
    this.options.xAxis[0].max = max;
    this.options.xAxis[1].max = max;
    this.options.xAxis[2].max = max;
    this.options.xAxis[3].max = max;
    this.options.xAxis[4].max = max;
  }, // 刻度设定
  setOptionsScale() {
    const optionsSetup = this.optionsSetup;
    const series = this.options.series[3];
    // 刻度
    // 显示
    if (optionsSetup.isShowScale) {
      series.data = scale;
    } else {
      series.data = 0;
    }
    series.barWidth = optionsSetup.scaleBarWidth;
    series.itemStyle = {
      normal: {
        color: optionsSetup.scaleColor,
      },
    };
    //刻度值
    series.label = {
      normal: {
        show: true,
        position: "bottom",
        distance: optionsSetup.scaleDistance,
        fontSize: optionsSetup.scaleFontSize,
        color: optionsSetup.scaleFontColor,
        fontWeight: optionsSetup.scaleFontWeight,
        fontStyle: optionsSetup.scaleFontStyle,
        fontFamily: optionsSetup.scaleFontFamily,
        formatter: function(params) {
          if (params.dataIndex % 10 === 0) {
            return params.dataIndex;
          } else if (params.dataIndex == max) {
            return params.dataIndex;
          } else {
            return "";
          }
        },
      },
    };
  },
  // 外框设置
  setOptionsOutBar() {
    const optionsSetup = this.optionsSetup;
    const series = this.options.series[2];
    series.barWidth = optionsSetup.outBarWidth;
    series.itemStyle = {
      normal: {
        color: optionsSetup.outBarColor,
        barBorderRadius: optionsSetup.outBarRadius,
      },
    };
    series.data = [max];
  },
  // 内框设置
  setOptionsInBar() {
    const optionsSetup = this.optionsSetup;
    const series = this.options.series[1];
    series.barWidth = optionsSetup.inBarWidth;
    series.itemStyle = {
      normal: {
        color: optionsSetup.inBarColor,
        barBorderRadius: optionsSetup.inBarRadius,
      },
    };
    series.data = [max - 1];
  },
  // 渐变色设置
  setOptionsColor(inputValue, inputMax) {
    const optionsSetup = this.optionsSetup;
    let gradient = [];
    if (inputValue > inputMax * 0.7) {
      gradient.push(
        {
          offset: 0,
          color: optionsSetup.bar0Color,
        },
        {
          offset: 0.3,
          color: optionsSetup.bar30Color,
        },
        {
          offset: 0.7,
          color: optionsSetup.bar70Color,
        },
        {
          offset: 1,
          color: optionsSetup.bar100Color,
        }
      );
    } else if (inputValue > inputMax * 0.3) {
      gradient.push(
        {
          offset: 0,
          color: optionsSetup.bar0Color,
        },
        {
          offset: 0.5,
          color: optionsSetup.bar30Color,
        },
        {
          offset: 1,
          color: optionsSetup.bar70Color,
        }
      );
    } else {
      gradient.push(
        {
          offset: 0,
          color: optionsSetup.bar0Color,
        },
        {
          offset: 1,
          color: optionsSetup.bar30Color,
        }
      );
    }
    return gradient;
  }, // 边距设置
  setOptionsMargin() {
    const optionsSetup = this.optionsSetup;
    const grid = {
      left: optionsSetup.marginLeft,
      right: optionsSetup.marginRight,
      bottom: optionsSetup.marginBottom,
      top: optionsSetup.marginTop,
      containLabel: true,
    };
    this.options.grid = grid;
  },
};
